<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
input{
	width: 300px;
	height: 50px;
	border: 1px solid gray;
	border-radius: 6px;
}
button{
	width: 100px;
	height: 50px;
	background-color: #7FFF00;
	color: #FFFFFF;
	border: none;
	border-radius: 6px;
}
#addUserInfo{
	background-color: #FF0000;
}
table{
	width: 80%;
	text-align: center;
}
#addUserInfoMsg{
	width: 600px;
	height: 400px;
	position: absolute;
	top: 70px;
	left: 252px;
	box-shadow: 6px 6px 12px gainsboro;
		border-radius: 12px;
		text-align: center;
		background-color: #DCDCDC;
		display: none;
}
#addUserInfoMsg div{
	margin-top: 20px;
}
#addUserInfoMsg input{
	border-radius: 6px;
}
a{
	width: 80px;
	height: 40px;
	
	color: #FFFFFF;
	border: none;
	border-radius: 6px;
	display: inline-block;
	/* position: relative;
	top:-13px; */
	margin-left: 6px;
	text-decoration: none;
	font-size: 13px;
	line-height: 40px;
	
	
}
table tr:hover{
	background-color: #DCDCDC;
}

</style>
</head>
<body>
<div id="search">
<form action="getUserInfoes">
	<input type="text" placeholder="请输入" name="username">
	<button>查询</button>
	<button id="addUserInfo" type="button" onclick="addUserInfoMethod()" >新增</button>
</form>
</div>
<div style="margin-top: 20px;">
<table cellspacing="0">
<thead>
	<tr>
		<th>序号</th>
		<th>用户名</th>
		<th>密码</th>
		<th>家庭住址</th>
		<th>联系方式</th>	
		<th>操作</th>	
	</tr>	
</thead>
<tbody>
<%--使用jstl标签库 
foreach标签表示遍历
 items属性为要进行遍历的数据 var表示集合中的每个元素的名字 因集合中每个元素为map，
 获取map对的结果可以通过变量名字.key值进行获取对应的value
 varStatus表示元素的状态，可以通过属性获取索引值 --%>
 <c:forEach items="${userinfoes}" var="user" varStatus="status">
        <tr>
            <td>${status.index+1}</td>
            <td>${user.username}</td>
            <td>${user.userpwd}</td>
            <td>${user.useraddress}</td>
            <td>${user.usertel}</td>
            <td><a style="background-color: #9ACD32;" href="http://localhost:8086/javawebDemo20240602/getUserInfoByid?id=${user.id}">修改</a>&nbsp;
            <a style="background-color: red;" href="http://localhost:8086/javawebDemo20240602/deleteUserInfo?id=${user.id}">删除</a></td>
        </tr>
    </c:forEach>
</tbody>



</table>


</div>
<%--新增弹框 --%>
<div id="addUserInfoMsg">
	<form action="addUserInfo" >
		<div>			
			用&nbsp; 户&nbsp; 名<input type="text" name="username"/>
		</div>
		<div>
			密&nbsp; &nbsp; &nbsp; &nbsp;码<input type="text" name="userpwd"/>
		</div>
		<div>
			家庭住址<input type="text" name="useraddress"/>
		</div>
		<div>
			联系方式<input type="text" name="usertel"/>
		</div>
		<div>
			<button>新增</button><button style="margin-left:50px;background-color: #808080;" type="button" onclick="closeAddUserInfo()">关闭</button>
		</div>
		
		
	</form>
	
	
	
</div>

</body>
<script>
	function addUserInfoMethod(){
		var addInfo=document.getElementById("addUserInfoMsg")
		addInfo.style.display="block"	
	}
	function closeAddUserInfo(){
		var addInfo=document.getElementById("addUserInfoMsg")
		addInfo.style.display="none"
	}
</script>
</html>